<template>
<div class="search-pop">
  <popup v-model="show" height="100%" position="top">
    <div class="wap">
      <div class="header display-flex align-items-center vux-1px-b">
        <div class="back" @click="hide">
          <span class="close iconfont icon-guanbi"></span>
        </div>
        <div class="search-container display-flex flex-1 align-items-center">
          <span class="icon-sea iconfont icon-Search"></span>
          <group class="flex-1">
            <x-input   ref="input" v-model="value" :show-clear="false" placeholder="输入商品、品牌名称查找商品" ></x-input>
          </group>
        </div>

        <div class="search" @click="comfirm">搜索</div>
      </div>
      <div class="main">

      </div>
    </div>

  </popup>


</div>
</template>
<script type="text/ecmascript-6">
    export default{
       data(){
       return {
         show:false,
         value:''
       }
       },
      methods:{
         showPop(){
           this.show=true;
           this.value="";
           this.$nextTick(() => {
             this.$refs.input.focus();
           });
         },
        hide(){
          this.show=false
        },
        comfirm(){
          this.$emit("search",{value:this.value})
          this.show=false
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  .search-pop{
    .header{
      height: 1.1rem;
      /deep/ .weui-input{
        text-align: left !important;
        box-sizing: border-box;
        background: #eee;
        font-size:.28rem ;
        padding-left: .2rem;
      }
    }
    .vux-popup-dialog{
      background: #fff;
    }

    .weui-cell{
      background: #fff !important;
    }
    .back{
      padding-left: .3rem;
      padding-right: .3rem;
      .close{
        font-size: .35rem;
        color: #333;
      }
    }
    /deep/ .weui-cells:before,/deep/ .weui-cells:after{
      border: none;
    }
    .search{
      padding-right: .2rem;
      padding-left: .2rem;
      color: #999;
      font-size: .3rem;
    }
    /deep/ .weui-cell__bd{


    }
    .search-container{
      border-radius: .7rem;
      background: #eee;
      overflow: hidden;
      border: 1px solid #ddd;
    }
    /deep/ .weui-cell{
      padding: 0;
    }
    .icon-sea{
      margin-left: .2rem;
      display: inline-block;
    }

  }
</style>
